Spectre

5월 25, 2016 本文总阅读量次

007 스펙터는 아닙니다.

개발자에게 가장 힘든 건 뭘까요? 여러가지가 있겠지만 같은 모듈을 계속 쓰는 권태로움도 그 중 하나죠.

Bootstrap에게 “이제 그만 쓰고 싶어” 라고 차마 말하지 못하는 여러가지 이유가 있지만 손쉽고 편하게 사용할 수 있는게 부트스트랩만한 녀석이 없는 것은 사실입니다.

2016/05/25 Editor’s choice

오늘은 이 권태로움을 벗어나게 해주는 새로운 대안이 될 지도 모를 css 프레임워크 spectre 입니다.

picturepan2/spectre
_spectre - Spectre.css - a lightweight, responsive and modern CSS framework._github.com

스펙터가 아이언맨이라니… ㄷ ㄷ

설치하기

npm install 옵션과 bower install 옵션 두가지를 지원합니다.

여기서 많은 개발자 들이 어랏! image와 font는 어쩌고. 라고 하실 것 같습니다. 네, css 밖에 없기 때문에 css만 따로 다운로드 받으셔도 됩니다.

$ npm install spectre.css

$ bower install spectre.css

실행해 봅시다.

Spectre.css - a lightweight, responsive and modern CSS framework
_There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM…_picturepan2.github.io

이 샘플 페이지를 한번 죽 훑어 보시는 게 아마 도움이 되실 듯 합니다.

이미지 처리

일단 image 와 font에 대한 부분을 먼저 짚고 넘어가면, bootstrap과 달리 spectre는 순수 css 만을 지향합니다. 그래서 이미지가 들어가야하는 부분은

<div class="chip-sm"\>  
<span class="chip-name"\>Crime</span\>  
<button class="btn btn-clear"\></button\>  
</div\>  

<div class="chip-sm"\>  
<span class="icon icon-favorite\_border"\></span\>  
<span class="chip-name"\>Drama</span\>  
<button class="btn btn-clear"\></button\>  
</div\>  

<div class="chip-sm"\>  
<img src="img/avatar-1.png" class="avatar" /\>  
<span class="chip-name"\>Yan Zhu</span\>  
<button class="btn btn-clear"\></button\>  
</div\>

이렇게 img src 로 표현하는 것을 원칙으로 하고 있습니다.

위의 소스는 chips 인데 다음과 같은 그림이 만들어집니다.